<script setup>
  import PageContainer from '@/components/PageContainer.vue'
  import { useUserStore } from '@/stores'
  import { ref } from 'vue'
  import { userHandleInfoService } from '@/api/user'
  const formRef = ref()
  const baseInfo = ref({
    id: '',
    username: '',
    nickname: '',
    email: '',
    user_pic: null
  })

  // 验证规则
  const rules = ref({
    username: [
      { required: true, message: '输入内容不能为空', trigger: 'blur' },
      {
        min: 1,
        max: 10,
        message: '请输入 1-10 位长度的用户名',
        trigger: 'blur' // 失去焦点的时候触发
      }
    ],
    nickname: [
      { required: true, message: '输入内容不能为空', trigger: 'blur' },
      {
        min: 1,
        max: 10,
        message: '请输入 1-10 位长度的用户名',
        trigger: 'blur' // 失去焦点的时候触发
      }
    ],
    email: [{ required: true, message: '输入内容不能为空', trigger: 'blur' }]
  })

  // 渲染用户基本信息
  const userStore = useUserStore()
  // console.log(userStore.user)
  baseInfo.value = { ...userStore.user }

  //提交修改基本资料
  const changeBaseInfo = async () => {
    formRef.value.validate()
    // 发送请求修改
    await userHandleInfoService(baseInfo.value)
    //获取用户数据
    userStore.getuser()
    ElMessage.success('修改成功')
  }
</script>
<template>
  <PageContainer title="基本资料">
    <el-form :ref="formRef" :model="baseInfo" :rules="rules">
      <el-form-item label="登录名称" prop="username">
        <el-input disabled v-model="baseInfo.username"></el-input>
      </el-form-item>

      <el-form-item label="用户昵称" prop="nickname">
        <el-input v-model="baseInfo.nickname"></el-input>
      </el-form-item>

      <el-form-item label="用户邮箱" prop="email">
        <el-input v-model="baseInfo.email"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="changeBaseInfo">提交修改</el-button>
      </el-form-item>
    </el-form>
  </PageContainer>
</template>

<style lang="scss" scoped>
  .el-input {
    width: 50%;
  }
</style>
